<template>
  <panel>
    <div class="block">
      <el-cascader
        :options="options"
        v-model="selectedOptions"
        @change="handleChange"
        size="small">
      </el-cascader>
    </div>
  </panel>
</template>


<script>


  let list = [
    {
      parentId: null,
      id: '1',
      value: '1',
      label: '1',
    }, {
      parentId: '1',
      id: '2',
      value: '2',
      label: '2',
    }, {
      parentId: '1',
      id: '3',
      value: '3',
      label: '3',
    }, {
      parentId: '',
      id: '4',
      value: '4',
      label: '4',
    }];


  import {list2tree} from '@/utils/treeUtils';

  export default {
    data() {
      return {
        options: [],
        selectedOptions: [],
      };
    },
    created() {
      this.options = list2tree(list);
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
    },
  };
</script>
